/* 
  功能1：拆分组件
    TodoHeader TodoMain TodoFooter
  功能2：列表展示
    1. 在App.vue中提供数据
    2. 父传子的方式把数据传递给TodoMain   使用prop校验
    3. TodoMain组件渲染数据  v-for  v-model  v-bind:class

  功能3：删除功能
    1. 给TodoMain组件的删除按钮注册点击事件
    2. 获取到删除的任务的id  不能自己删
    3. 子传父的方式把id传递给父组件
    4. 父组件删除对应的数据

  功能4：修改功能
    1. 给TodoMain组件的label注册双击事件，让修改的input框显示出来 (通过editing类控制)
    2. 记录双击label的id和name (storeName,storeId)
    3. 点击时令storeName = item.name数据回显
    4. 给修改的input注册keyup.enter 和 .esc 事件
    5. enter时传storeId和storeName给父组件让父组件改值，esc时清除storeId即可

  功能5：显示剩余任务数量
    1. 根据数据量显示隐藏footer组件
    2. 通过父传子把list传给footer组件
    3. 给footer中span中0换成计算属性
    4. 通过过滤list得到isDown为false的数据数组拿它长度

  功能6：清空已完成任务
    1. 给footer组件的按钮注册点击事件
    2. 点击触发父组件给footer注册的clear事件
    3. 父组件删除已完成的任务数

  功能7：点击footer相应的a标签显示相应的任务
    1. 给App增加一个type值传给footer组件控制a标签边框的显示
    2. footer组件点击a标签把type要改的值传给父组件改
    3. Main组件接收type值,并设置一个计算属性showList
    4. 通过type和list确定showList的值
    5. 遍历showList显示出来

  功能8：点击头部全选,让任务状态全为true或全为false
    1.

*/
import Vue from 'vue'
import App from './App.vue'
import './styles/base.css'
import './styles/index.css'
import store from './store'
Vue.config.productionTip = false

Vue.directive('header-focus',{
  inserted(el){
    el.focus()
  }
})

Vue.directive('main-focus', {
  update(el) {
    el.focus()
  },
})

new Vue({
  render: (h) => h(App),
  store,
}).$mount('#app')
